export function useLockTypeAndStatu() {
  const getTypeOptionsRef = computed(() => [
    { label: $t('oaQybt85UMzOrSmKasb7'), value: 1 },
    { label: $t('epxWlz7JTntSA9VrwL'), value: 2 },
  ]);

  const getStatuOptionsRef = computed(() => [
    { label: $t('3QwBSvfjmdOhck7Op0Zc9'), value: 1, bgColor: 'bg-yellow-500', textColor: 'text-sys-text-head text-[13px]' },
    { label: $t('f9E9btYhJxcKsNUlPhX'), value: 2, bgColor: 'bg-orange-500', textColor: 'text-sys-text-head text-[13px]' },
    { label: $t('zXxyPoDJgZvaBmg5RfCb9'), value: 3, bgColor: 'bg-green-500', textColor: 'text-sys-text-head text-[13px]' },
    { label: $t('sO1sOrV2TBlM1k50Arn'), value: 4, bgColor: 'bg-sys-text-body', textColor: 'text-sys-text-body text-[13px]' },
    { label: $t('gTgJirbMRvY3OszLEda3'), value: 5, bgColor: 'bg-sys-text-body', textColor: 'text-sys-text-body text-[13px]' },
  ]);

  function getText(val?: number, type: 'type' | 'statu' = 'type') {
    const list = type === 'type' ? getTypeOptionsRef.value : getStatuOptionsRef.value;
    const find = list.find(x => x.value === val);
    return find?.label ?? '-';
  }

  function RenderStatu({ statu, isText = true }: { statu?: number;isText?: boolean }) {
    const find = getStatuOptionsRef.value.find(x => x.value === statu);
    if (!find)
      return null;
    const TextDom = (
      <div class="flex items-center gap-1">
        <div class={`h-2 w-2 rounded-[50%] ${find.bgColor}`}></div>
        <div class={`${find.textColor}`}>{find.label}</div>
      </div>
    );

    if (isText)
      return TextDom;
    return (
      <div class="w-fit rounded-[6px] bg-sys-layer-d px-1.5 py-1">
        {TextDom}
      </div>
    );
  }

  return {
    getTypeOptionsRef,
    getStatuOptionsRef,
    getText,
    RenderStatu,
  };
}
